<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery子元素过滤选择器</title>
    <meta charset="utf-8">
   
    <style type="text/css">
        div{
            background: gray;
            width: 200px;
            height: 100px;
        }
        .son{
            background: cyan;
            width: 180px;
            height: 20px;
        }
    </style>
</head>
<body>
    <!--定义被选择对象-->
    <div>zero</div>
    <div class="one">one</div>
    <div class="one">
        two
        <div class="son">three,第一个子元素</div>
        <div class="son">four,第二个子元素</div>
        <div class="son">five,第三个子元素</div>
    </div>
    <div class="one">
        six
        <div class="son">seven</div>
    </div>
    <div></div>
    <span>我是span标签</span>
    <br><br>
    <!--定义按钮-->
    <input type="button" id="btn01" value="选择class属性值为one的div元素的第二个子元素:nth-child(2)"/>
    <input type="button" id="btn02" value="选择class属性值为one的div元素的第一个子元素:first-child"/>
    <input type="button" id="btn03" value="选择class属性值为one的div元素的最后一个子元素:last-child"/>
    <input type="button" id="btn04" value="选择class属性值为one的并且只有一个子元素的div元素中的这一个子元素"/>
</body>
</html>